<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"
	rel="stylesheet">
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
	$(function() {
		$("input:checkbox").click(
				function() {
					$(this).attr("disabled", "disabled");
					$(this).parent("label").css("text-decoration",
							"line-through");
					var missionid = $(this).parent().parent().parent().parent()
							.parent().children().find("a").attr("id");
					//alert(missionid);

					$.ajax({
						url : "CompleteMission.do?missionid=" + missionid,
						success : function(result) {
							alert("完成当前任务");
						}
					});
					/* alert($("#sss").html()); */
				});
	});
</script>

</head>
<body>

<div class="col-md-3 column">
				<ul class="nav nav-stacked nav-tabs">
					<li><a>任务</a></li>

				</ul>
			</div>


			<div class="col-md-9 column">

	<div class="panel-group" id="panel-930537">
		<c:forEach var="mission" items="${missionslist}">

			<div class="panel panel-default">
				<div class="panel-heading">
					<a class="panel-title collapsed" data-toggle="collapse"
						data-parent="#panel-930537" id="${mission.missionid}"
						href="#panel-element-${mission.missionid}">${mission.missionid}&nbsp;${mission.missionname}&nbsp;&nbsp;开始时间:${mission.startdate}&nbsp;&nbsp;预计完成时间：${mission.etc}&nbsp;&nbsp;实际完成时间:${mission.aft}</a>
				</div>
				<div   id="panel-element-${mission.missionid}"  class="panel-collapse collapse">
					<div class="panel-body">
						<div class="checkbox">
							<c:if test="${mission.iscompleted == 0}">
							<label><input type="checkbox" value="" />${mission.description}</label>
							</c:if>
							<c:if test="${mission.iscompleted == 1}">
							<label style="text-decoration:line-through;"><input type="checkbox" value="" disabled="disabled"/>${mission.description}</label>
							</c:if>
						</div>
					</div>
				</div>
			</div>

		</c:forEach>
	</div>
</div>	
<!-- 
	<ul class="pagination">
		<li><a href="#">Prev</a></li>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">Next</a></li>
	</ul>
 -->
</body>
</html>